<template>
  <div id="index" class="root">
    <div class="header">
      <svg
        t="1612880117249"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="23843"
        width="128"
        height="128"
      >
        <path
          d="M224 800c-88.22 0-160-71.78-160-160s71.78-160 160-160 160 71.78 160 160-71.78 160-160 160z m0-256a96 96 0 1 0 96 96 96.11 96.11 0 0 0-96-96zM800 544c-88.22 0-160-71.78-160-160s71.78-160 160-160 160 71.78 160 160-71.78 160-160 160z m0-256a96 96 0 1 0 96 96 96.11 96.11 0 0 0-96-96z"
          fill="#231815"
          p-id="23844"
        ></path>
        <path
          d="M654.85 960c-51.81 0-94.23-16.2-126.07-48.16-55.33-55.53-56.17-138.59-56.16-143.52V225.9c-0.52-4.72-3.69-28.58-17.39-51.35-18.86-31.32-48.5-46.55-90.64-46.55s-71.71 15.9-90.78 48.6c-14 24-17.28 49.05-17.81 54v273.72a32 32 0 1 1-64 0v-275.2c0-0.73 0-1.45 0.07-2.18 0.29-4.14 3.39-41.59 25-80.06 13.44-23.91 31.17-43.08 52.71-57C296.44 72.72 328.34 64 364.59 64c36.08 0 67.81 8.38 94.31 24.92 21.56 13.46 39.3 32.06 52.73 55.28 21.67 37.49 24.65 74.08 24.92 78.13 0 0.7 0.07 1.41 0.07 2.11v543.88c0 0.34 0.33 34.92 16.31 67.88 19.5 40.24 52.84 59.8 101.92 59.8 34.28 0 60.08-9.38 78.85-28.68 35.1-36.08 34.3-95.82 34.3-97.94v-250.3a32 32 0 1 1 64 0v248.83c0.2 9 0.44 89.3-52 143.6C749 943.69 706.84 960 654.85 960z"
          fill="#231815"
          p-id="23845"
        ></path>
      </svg>
      <!-- <svg t="1612879980889" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18965" data-spm-anchor-id="a313x.7781069.0.i0" width="128" height="128"><path d="M351.904812 512.089589H1087.608049a256.044794 256.044794 0 1 0-256.044794-256.044795 32.072791 32.072791 0 0 0 63.966404 0v-1.43342A192.07839 192.07839 0 1 1 1087.608049 448.123185H351.904812a32.072791 32.072791 0 1 0 0 63.966404z" fill="#515151" p-id="18966" data-spm-anchor-id="a313x.7781069.0.i1" class=""></path><path d="M1343.832021 576.055993H32.072791a32.072791 32.072791 0 1 0 0 63.966404H1343.832021a128.111986 128.111986 0 1 1-127.932808 128.649519 32.072791 32.072791 0 0 0-63.966405 0A192.07839 192.07839 0 1 0 1343.832021 576.055993z" fill="#707070" p-id="18967" data-spm-anchor-id="a313x.7781069.0.i2" class=""></path><path d="M927.60245 703.988801H223.972003a32.072791 32.072791 0 1 0 0 63.966405h703.630447a96.039195 96.039195 0 1 1-96.039195 97.293438 3.046019 3.046019 0 0 0 0-1.254243 32.072791 32.072791 0 1 0-63.966405 0 160.005599 160.005599 0 1 0 160.0056-160.0056z" fill="#303135" p-id="18968" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path></svg> -->
      <span>TRACKER</span>
      <span style="margin: 0 8px 0 8px">·</span>
      <span>追蹤者</span>
    </div>
    <div class="container">
      <div class="left-controller-bar">
        <!-- Eden -->
        <div
          :class="edenVisible ? 'region-visible' : 'region-hidden'"
          @click="changeEdenVisibility"
        >
          <div class="circle">
            <svg
              t="1612876534732"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1517"
              width="128"
              height="128"
            >
              <path
                d="M635.3 631.7L387 773.1l82.8 47.4 247.6-141.4z"
                fill="#ffffff"
                p-id="1518"
              ></path>
              <path
                d="M469.2 915.4L387 868v-94.9l82.8 47.4z"
                fill="#ffffff"
                p-id="1519"
              ></path>
              <path
                d="M717.4 679.1V774L469.2 915.4l0.6-94.9z"
                fill="#ffffff"
                p-id="1520"
              ></path>
              <path
                d="M635.3 348.1L306.6 535.5l82.7 47.4 328.1-187.4z"
                fill="#ffffff"
                p-id="1521"
              ></path>
              <path
                d="M388.7 677.8l-82.1-47.4v-94.9l82.7 47.4z"
                fill="#ffffff"
                p-id="1522"
              ></path>
              <path
                d="M717.4 395.5v94.9L388.7 677.8l0.6-94.9z"
                fill="#ffffff"
                p-id="1523"
              ></path>
              <path
                d="M388.7 296.5l-82.1 47.4 82.7 47.4 81.6-47.4z"
                fill="#ffffff"
                p-id="1524"
              ></path>
              <path
                d="M388.7 961.4L306.6 914V343.9l82.7 47.4z"
                fill="#ffffff"
                p-id="1525"
              ></path>
              <path
                d="M470.9 343.9V914l-82.2 47.4 0.6-570.1z"
                fill="#ffffff"
                p-id="1526"
              ></path>
              <path
                d="M635.3 62.6L306.6 248.1l82.7 47.4L717.4 110z"
                fill="#ffffff"
                p-id="1527"
              ></path>
              <path
                d="M388.7 390.4L306.6 343v-94.9l82.7 47.4z"
                fill="#ffffff"
                p-id="1528"
              ></path>
              <path
                d="M717.4 110v94.9L388.7 390.4l0.6-94.9z"
                fill="#ffffff"
                p-id="1529"
              ></path>
            </svg>
          </div>
          <span>Eden</span>
        </div>
        <!-- Survivor -->
        <div
          :class="sVisible ? 'region-visible' : 'region-hidden'"
          @click="changeSVisibility"
        >
          <div class="circle">
            <svg
              t="1612876787289"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1880"
              width="128"
              height="128"
            >
              <path
                d="M634.5 440.8l-81.6 47.1 82.2 47.2 81.1-47.2z"
                fill="#ffffff"
                p-id="1881"
              ></path>
              <path
                d="M634.5 724.3l-81.6-47.1V487.9l82.2 47.2z"
                fill="#ffffff"
                p-id="1882"
              ></path>
              <path
                d="M716.2 487.9v189.3l-81.7 47.1 0.6-189.2z"
                fill="#ffffff"
                p-id="1883"
              ></path>
              <path
                d="M635.8 348.8l-327 188.1L391 584l326.4-188z"
                fill="#ffffff"
                p-id="1884"
              ></path>
              <path
                d="M390.4 678.3l-81.6-47.2v-94.2L391 584z"
                fill="#ffffff"
                p-id="1885"
              ></path>
              <path
                d="M717.4 396v94.2l-327 188.1 0.6-94.3z"
                fill="#ffffff"
                p-id="1886"
              ></path>
              <path
                d="M553 676.9L306.6 818.5l82.1 47.1 246-141.6z"
                fill="#ffffff"
                p-id="1887"
              ></path>
              <path
                d="M388.2 959.8l-81.6-47.1v-94.2l82.1 47.1z"
                fill="#ffffff"
                p-id="1888"
              ></path>
              <path
                d="M634.7 724v94.3L388.2 959.8l0.5-94.2z"
                fill="#ffffff"
                p-id="1889"
              ></path>
              <path
                d="M634.5 64.2L389.2 205l82.2 47.1 244.8-140.8z"
                fill="#ffffff"
                p-id="1890"
              ></path>
              <path
                d="M470.9 346.4l-81.7-47.2V205l82.2 47.1z"
                fill="#ffffff"
                p-id="1891"
              ></path>
              <path
                d="M716.2 111.3v94.2L470.9 346.4l0.5-94.3z"
                fill="#ffffff"
                p-id="1892"
              ></path>
              <path
                d="M390.4 299.9L308.8 347l82.2 47.1 81-47.1z"
                fill="#ffffff"
                p-id="1893"
              ></path>
              <path
                d="M390.4 583.4l-81.6-47.2V347l82.2 47.1z"
                fill="#ffffff"
                p-id="1894"
              ></path>
              <path
                d="M472 347v189.3l-81.6 47.1 0.6-189.3z"
                fill="#ffffff"
                p-id="1895"
              ></path>
            </svg>
          </div>
          <span>Survivor</span>
        </div>
        <!-- Old -->
        <div
          :class="oldVisible ? 'region-visible' : 'region-hidden'"
          @click="changeOldVisibility"
        >
          <div class="circle">
            <svg
              t="1612876818287"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2087"
              width="128"
              height="128"
            >
              <path
                d="M740.1 116.9L649 169.5l91.8 52.6 90.5-52.6z"
                fill="#ffffff"
                p-id="2088"
              ></path>
              <path
                d="M740.1 643.6L649 591V169.5l91.8 52.6z"
                fill="#ffffff"
                p-id="2089"
              ></path>
              <path
                d="M831.3 169.5V591l-91.2 52.6 0.7-421.5z"
                fill="#ffffff"
                p-id="2090"
              ></path>
              <path
                d="M649.1 591.2L283.9 802.1l91.8 52.6 364.6-210.9z"
                fill="#ffffff"
                p-id="2091"
              ></path>
              <path
                d="M375.1 960l-91.2-52.6 0.1-105.3 91.7 52.6z"
                fill="#ffffff"
                p-id="2092"
              ></path>
              <path
                d="M740.3 643.8v105.3L375.1 960l0.6-105.3z"
                fill="#ffffff"
                p-id="2093"
              ></path>
              <path
                d="M649.1 64L283.9 274.9l91.8 52.6 364.6-210.9z"
                fill="#ffffff"
                p-id="2094"
              ></path>
              <path
                d="M375.1 432.8l-91.2-52.6 0.1-105.3 91.7 52.6z"
                fill="#ffffff"
                p-id="2095"
              ></path>
              <path
                d="M740.3 116.6v105.3L375.1 432.8l0.6-105.3z"
                fill="#ffffff"
                p-id="2096"
              ></path>
              <path
                d="M283.9 380.5l-91.2 52.6 91.8 52.6 90.5-52.6z"
                fill="#ffffff"
                p-id="2097"
              ></path>
              <path
                d="M283.9 907.2l-91.2-52.6V433.1l91.8 52.6z"
                fill="#ffffff"
                p-id="2098"
              ></path>
              <path
                d="M375 433.1v421.5l-91.1 52.6 0.6-421.5z"
                fill="#ffffff"
                p-id="2099"
              ></path>
            </svg>
          </div>
          <span>Old</span>
        </div>
        <!-- Code -->
        <div
          :class="codeVisible ? 'region-visible' : 'region-hidden'"
          @click="changeCodeVisibility"
        >
          <div class="circle">
            <svg
              t="1612876837489"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2291"
              width="128"
              height="128"
            >
              <path
                d="M675.5 629.7L348 818.1l81.9 47 327-188.4z"
                fill="#ffffff"
                p-id="2292"
              ></path>
              <path
                d="M429.4 959.1l-81.4-47v-94l81.9 47z"
                fill="#ffffff"
                p-id="2293"
              ></path>
              <path
                d="M756.9 676.7v94L429.4 959.1l0.5-94z"
                fill="#ffffff"
                p-id="2294"
              ></path>
              <path
                d="M348.5 347.3l-81.4 47 81.9 47 80.9-47z"
                fill="#ffffff"
                p-id="2295"
              ></path>
              <path
                d="M348.5 911.9l-81.4-47V394.3l81.9 47z"
                fill="#ffffff"
                p-id="2296"
              ></path>
              <path
                d="M429.9 394.3v470.6l-81.4 47 0.5-470.6z"
                fill="#ffffff"
                p-id="2297"
              ></path>
              <path
                d="M674.4 64.9L347.9 253l82 47 325.9-188.1z"
                fill="#ffffff"
                p-id="2298"
              ></path>
              <path
                d="M429.3 394l-81.4-47v-94l82 47z"
                fill="#ffffff"
                p-id="2299"
              ></path>
              <path
                d="M755.8 111.9v94L429.3 394l0.6-94z"
                fill="#ffffff"
                p-id="2300"
              ></path>
            </svg>
          </div>
          <span>Code</span>
        </div>
      </div>
      <div class="left">
        <div class="headtitle">
          <svg
            t="1612800817828"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5627"
            width="128"
            height="128"
          >
            <path
              d="M226.9696 801.3824c-16.3328 0-32.1024-6.5536-43.6736-18.2784a61.42464 61.42464 0 0 1-17.5104-46.7968l10.9056-174.0288c0.9216-14.8992 7.2704-28.928 17.8176-39.4752l410.7264-410.7264c44.1344-44.1344 115.9168-44.1344 160 0l92.4672 92.4672c44.1344 44.1344 44.1344 115.9168 0 160l-410.5216 410.5216a61.07136 61.07136 0 0 1-40.448 17.8688l-176.9472 8.3456c-0.9216 0.1024-1.8944 0.1024-2.816 0.1024z m458.2912-660.992c-13.2608 0-26.4704 5.0176-36.5568 15.104l-410.7264 410.7264-10.8544 173.9264 176.6912-8.5504 410.4704-410.4704c20.1728-20.1728 20.1728-52.9408 0-73.1136l-92.4672-92.4672a51.6096 51.6096 0 0 0-36.5568-15.1552z"
              fill="#303135"
              p-id="5628"
            ></path>
            <path
              d="M903.3216 933.2736H122.88c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h780.4416c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.72 30.72z"
              fill="#FF623E"
              p-id="5629"
            ></path>
            <path
              d="M675.6864 291.9424m-41.1136 0a41.1136 41.1136 0 1 0 82.2272 0 41.1136 41.1136 0 1 0-82.2272 0Z"
              fill="#FF623E"
              p-id="5630"
            ></path>
          </svg>
          <span>Code Here</span>
        </div>
        <el-upload
          prop="programFile"
          class="uploadFile"
          action="#"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :limit="1"
          accept=".java, .jar"
          :auto-upload="false"
        >
          <button :disabled="!writeable">上传文件</button>
          <!--          <span slot="tip" class="el-upload__tip">请上传java文件或jar包</span>-->
        </el-upload>

        <div class="codeArea">
          <div class="tabbar">
            <div class="tab tab-selected">untitled</div>
            <div class="tab">untitled</div>
          </div>
          <codemirror
            ref="myCm"
            v-model="item.content"
            :options="cmOptions"
            @changes="changes"
            @scroll="orderScroll"
            class="code"
            v-show="writeable"
          ></codemirror>
          <div class="highlight" :style="highlightline" v-show="alloc"></div>
<!--          <div-->
<!--            class="code"-->
<!--            v-show="!writeable"-->
<!--            style="font-family: monospace; font-size: 20px"-->
<!--          >-->
<!--            <div class="line"></div>-->
<!--            <div-->
<!--              v-for="(item, index) in content"-->
<!--              :key="index"-->
<!--              :class="{ red: breakpoint == index, blue: highlight == index }"-->
<!--            >-->
<!--              <span class="linenumber" @click="setBreakpoint(index)">{{-->
<!--                index + 1-->
<!--              }}</span>-->
<!--              <span style="color: inherit">{{ item }}</span>-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <button v-show="state == 'SUBMIT'" :disabled="disabled" @click="Submit">
          Submit
        </button>
        <button v-show="state == 'START'" :disabled="disabled" @click="Start">
          Start
        </button>
        <button v-show="state == 'NEXT'" :disabled="disabled" @click="Next">
          Next
        </button>
        <button v-show="state == 'RESET'" :disabled="disabled" @click="Reset">
          Reset
        </button>
      </div>
      <div class="right">
        <div class="headtitle">
          <svg
            t="1612804059532"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5776"
            width="128"
            height="128"
          >
            <path
              d="M815.2576 795.3408H208.7424c-73.4208 0-133.12-59.6992-133.12-133.12V218.624c0-73.4208 59.6992-133.12 133.12-133.12h606.5664c73.4208 0 133.12 59.6992 133.12 133.12v443.5968c-0.0512 73.4208-59.7504 133.12-133.1712 133.12zM208.7424 146.944c-39.5264 0-71.68 32.1536-71.68 71.68v443.5968c0 39.5264 32.1536 71.68 71.68 71.68h606.5664c39.5264 0 71.68-32.1536 71.68-71.68V218.624c0-39.5264-32.1536-71.68-71.68-71.68H208.7424zM706.2016 945.4592H317.7984c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h388.4032c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.72 30.72z"
              fill="#303135"
              p-id="5777"
            ></path>
            <path
              d="M256.6144 563.0976a30.6176 30.6176 0 0 1-22.3232-9.6256 30.67904 30.67904 0 0 1 1.2288-43.4176l162.7648-153.9072a30.72512 30.72512 0 0 1 41.8304-0.3584l129.7408 118.784 176.2816-169.2672c12.2368-11.7248 31.6928-11.3664 43.4176 0.8704s11.3664 31.6928-0.8704 43.4176l-197.0688 189.2352a30.77632 30.77632 0 0 1-42.0352 0.512L419.6864 420.4032l-141.9776 134.2976a30.7456 30.7456 0 0 1-21.0944 8.3968z"
              fill="#FF623E"
              p-id="5778"
            ></path>
          </svg>
          <span>Analysis</span>
          <div class="analysis-controller-bar">
            <!-- RESET -->
            <div class="circle" @click="Reset">
              <svg
                t="1612866462414"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="773"
                width="128"
                height="128"
              >
                <path
                  d="M978.179753 437.178602l8.25236-437.178602-149.131936 149.171233a488.107453 488.107453 0 0 0-341.7656-139.111213C224.464195 10.020723 4.715634 229.808581 4.715634 500.839665c0 271.109678 219.748561 490.818942 490.818943 490.818943 224.896462 0 413.993399-151.371863 472.074296-357.641569H827.161563c-52.815105 131.448308-181.276844 224.346304-331.626986 224.346304a357.484381 357.484381 0 0 1-357.484381-357.484381c0-197.506486 160.056489-357.602272 357.484381-357.602272 96.277535 0 182.809425 38.746796 246.981349 100.6002l-201.514775 201.475478 437.178602-8.213063z"
                  fill="#ffffff"
                  p-id="774"
                ></path>
              </svg>
            </div>
            <!-- NEXT -->
            <div class="circle" @click="Next">
              <svg
                t="1612866634875"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="974"
                width="128"
                height="128"
              >
                <path
                  d="M835.544615 517.671385v-4.608l2.363077 2.284307-2.363077 2.363077z m174.710154-2.520616l-86.094769-86.094769-0.236308 0.275692L517.001846 22.449231l-86.016 86.055384 341.385846 341.464616H26.387692v121.698461h755.318154l-350.680615 350.641231 86.016 86.055385 406.921846-406.843077 0.236308 0.196923 86.094769-86.055385-0.275692-0.275692 0.275692-0.196923z"
                  fill="#ffffff"
                  p-id="975"
                ></path>
              </svg>
            </div>
            <!-- Play -->
            <div class="circle" @click="startAutoplay">
              <svg
                t="1612866773906"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="777"
                width="128"
                height="128"
              >
                <path
                  d="M989.155556 559.217778L373.048889 973.198222a56.888889 56.888889 0 0 1-88.604445-47.217778V98.019556a56.888889 56.888889 0 0 1 88.604445-47.217778L989.155556 464.782222a56.888889 56.888889 0 0 1 0 94.435556z"
                  fill="#ffffff"
                  p-id="778"
                ></path>
              </svg>
            </div>
            <!-- Pause -->
            <div class="circle" @click="pauseAutoplay">
              <svg
                t="1618380500795"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6430"
                width="200"
                height="200"
              >
                <path
                  d="M448 871.6 448 152.2c0-13.4-10.8-24.2-24.4-24.2l-143.2 0c-13.6 0-24.4 10.8-24.4 24.2l0 719.4c0 13.4 10.8 24.4 24.4 24.4l143.2 0C437.2 896 448 885.2 448 871.6z" p-id="6431">
                </path>
                <path
                  d="M743.6 128l-143.2 0c-13.4 0-24.4 10.8-24.4 24.2l0 719.4c0 13.4 10.8 24.4 24.4 24.4l143.2 0c13.4 0 24.4-10.8 24.4-24.4L768 152.2C768 138.8 757.2 128 743.6 128z" p-id="6432">
                </path>
              </svg>
            </div>
          </div>
          <div class="speed">
            <el-slider
                v-model="playSpeed"
                :min="100" :max="1000"
                :format-tooltip="formatTooltip"
                tooltip-class="tooltip"
                @change="changePlaySpeed"
            ></el-slider>
          </div>
          <span style="font-size: 26px" class="step">Step: {{ step }}</span>
        </div>
        <div class="workspace" v-show="running">
          <div
            class="young"
            :style="
              edenVisible || sVisible ? 'flex: 2;' : 'flex: 0; height: 0;'
            "
          >
            <!-- Eden -->
            <div :class="edenVisible ? 'eden' : 'eden-hidden'">
              <div class="gcTitle">Eden</div>
              <div class="size">
                <span style="display: flex">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="20"
                    :percentage="percentEden"
                    color="#7bed9f"
                  ></el-progress>
                  {{ currentEden }}/{{ totalEden }}
                </span>
              </div>
              <div class="result">
                <div
                  class="obj obj-allocation"
                  v-for="(item, index) in eden"
                  :key="index"
                  :class="{ markred: item.mark }"
                >
                  name: {{ item.name }}, size: {{ item.size }} hash:
                  {{ item.hash }}
                </div>
              </div>
            </div>
            <div :class="sVisible ? 'survivor' : 'survivor-hidden'">
              <!-- S0 -->
              <div class="s0">
                <div class="gcTitle">S0</div>
                <div class="size">
                  <span style="display: flex" v-show="nowS == 1">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="20"
                      :percentage="percentS"
                      color="#7bed9f"
                    ></el-progress>
                    {{ currentS }}/{{ totalS }}
                  </span>
                </div>
                <div class="result">
                  <div
                    class="obj obj-allocation"
                    v-for="(item, index) in s0"
                    :key="index"
                  >
                    name: {{ item.name }}, size: {{ item.size }} hash:
                    {{ item.hash }}
                  </div>
                </div>
              </div>
              <!-- S1 -->
              <div class="s1">
                <div class="gcTitle">S1</div>
                <div class="size">
                  <span style="display: flex" v-show="nowS == 0">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="20"
                      :percentage="percentS"
                      color="#ff7f50"
                    ></el-progress>
                    {{ currentS }}/{{ totalS }}
                  </span>
                </div>
                <div class="result">
                  <div
                    class="obj obj-survivor"
                    v-for="(item, index) in s1"
                    :key="index"
                  >
                    name: {{ item.name }}, size: {{ item.size }} hash:
                    {{ item.hash }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Old -->
          <div :class="oldVisible ? 'old' : 'old-hidden'">
            <div class="gcTitle">Old</div>
            <div class="size">
              <span style="display: flex">
                <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="percentOld"
                  color="#74b9ff"
                ></el-progress>
                {{ currentOld }}/{{ totalOld }}
              </span>
            </div>
            <div class="result">
              <div
                class="obj obj-old"
                v-for="(item, index) in old"
                :key="index"
              >
                name: {{ item.name }}, size: {{ item.size }} hash:
                {{ item.hash }}
              </div>
            </div>
          </div>
        </div>

        <div class="workspace waitingState" v-show="!running">
          {{ waitingContent }}
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/darcula.css'
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')

// 加载语言库
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'
import 'codemirror/mode/vue/vue.js'

var appData = require("./../../public/getAn.json")

export default {
  name: "index",
  components: {
    codemirror
  },

  data: function () {
    return {
      analysis: appData,
      currindex: 0,
      state: "SUBMIT",
      step: "init",
      running: false,
      waitingContent: "Waiting for code ...",
      disabled: false,
      currentEden: 0,
      currentS: 0,
      currentOld: 0,
      totalEden: "NA",
      totalS: "NA",
      totalOld: "NA",
      percentEden: 0,
      percentS: 0,
      percentOld: 0,
      eden: [],
      s0: [],
      s1: [],
      old: [],
      objs: [],
      nowS: 1,
      edenVisible: true,
      sVisible: true, // s showing or not
      oldVisible: true,
      codeVisible: true,

      writeable: true,
      content: [],
      breakpoint: -1,
      highlight: -1,

      programFile: null,

      item: {
        content: ''
      },
      cmOptions: {
        // codemirror options
        tabSize: 2,
        mode: 'text/javascript',
        theme: 'darcula',
        lineNumbers: true,
        line: true,
      },

      top: 40,
      scrollTop: 0,
      alloc: false,
      highlightline: {
        top: "40px"
      },

      playSpeed: 500,
      autoplay: -1,
      playId: -1
    }
  },
  // mounted() {
  //   this.box = this.$refs.myCm.codemirror
  //   console.log(this.box)
  //   this.box.addEventListener('scroll', () => {
  //     let current_offset_top = this.$refs.viewBox.scrollTop
  //     console.log(current_offset_top)
  //   })
  // },

  methods: {
    formatTooltip(val) {
      return String(val)+"ms"
    },
    orderScroll (e){
      console.log(e)
      this.scrollTop = e.doc.scrollTop
      console.log(this.scrollTop)
      this.highlightline.top = String(this.top-this.scrollTop) + "px"
    },
    checkScrollTop (){
      console.log(this.$refs.myCm)
      let top = this.$refs.myCm.codemirror.doc.scrollTop
      if (this.top<top || top<this.top-500 || 1==1){
        this.$refs.myCm.codemirror.scrollTo(0, this.top-100)
        console.log("ybyb")
      }
    },
    changeEdenVisibility () {
      this.edenVisible = !this.edenVisible
      // TO-DO
    },
    changeSVisibility () {
      this.sVisible = !this.sVisible
      // TO-DO hidden s or not
    },
    changeOldVisibility () {
      this.oldVisible = !this.oldVisible
      // TO-DO
    },
    changeCodeVisibility () {
      this.codeVisible = !this.codeVisible
      // TO-DO
    },
    changes () {
      console.log(this.item.content)
      this.content = this.item.content.split("\n")

    },
    setBreakpoint (index) {
      if (this.breakpoint == index) {
        this.breakpoint = -1
      }
      else {
        this.breakpoint = index
      }
    },

    handleChange (file, fileList) {
      this.programFile = fileList[0].raw
      console.log(fileList[0])
    },

    handleRemove () {
      this.programFile = null
    },

    handleExceed () {
      this.$message.warning("多文件请以jar包上传")
    },

    Submit () {
      console.log(this.item)
      console.log(this.programFile)
      this.state = 'START'
      // this.disabled = 'true'
      this.waitingContent = "Analysising the code"
      // setTimeout(()=>{this.waitingContent = "Analysising the code ."}, 500);
      // setTimeout(()=>{this.waitingContent = "Analysising the code .."}, 1000);
      // setTimeout(()=>{this.waitingContent = "Analysising the code ..."}, 1500);
      // setTimeout(()=>{this.waitingContent = "Analysis successful !"; this.disabled=false}, 2000);

      let that = this
      let data = new FormData()
      let file
      if (that.programFile != null) {
        data.append("file", that.programFile)
        let fileReader = new FileReader()
        console.log(that.programFile)
        fileReader.readAsText(that.programFile)
        fileReader.onload = function (e) {
          that.item.content = fileReader.result
          console.log(fileReader.result)
        }
      }
      else {
        // data.append("file", that.programFile)
        // url = "api2"
        // let arr = that.item.content.split('\n')
        // file = new File(arr, "demo.java")
        // data.append("file", file)
        data.append("file", that.item.content)
      }
      console.log(data.get('file'))
      that.$axios.post(`${that.$globalValue.site}/analysis/codes`, data,
        { headers: { 'Content-Type': 'multipart/form-data' } }
      )
        .then(res => {
          setTimeout(() => {
            console.log(res.data)
            let serialCode = res.data.data.serialCode
            //成功，发送第二次请求
            that.$axios.get(`${that.$globalValue.site}/analysis/` + serialCode + "?version=BRIEF")
              .then(res => {
                that.analysis = res.data
                console.log(that.analysis)
              })
              .catch(err => {
                return Promise.reject(err)
              })

          }, 1000)

        })
        .catch(err => {
          return Promise.reject(err)
        })

      // console.log(this.analysis)
    },

    getPercent (s, t) {
      return parseFloat((s / t * 100).toFixed(2))
    },

    moveTo (gen, tags) {
      for (let i = 0; i < tags.length; i++) {
        let o = this.objs.find(item => item.target == tags[i])
        gen.push(o)
      }
    },

    Start () {
      console.log("start")
      this.state = 'NEXT'
      this.running = true
      console.log(this.analysis)

      var res = this.analysis.data[0]
      this.totalEden = res.ec
      this.totalS = res.sc
      this.totalOld = res.oc
      this.currentEden = res.jys
      this.currentOld = res.jos
      this.percentEden = this.getPercent(this.currentEden, this.totalEden)
      this.currindex++
    },

    Next () {
      if (this.currindex == this.analysis.data.length) {
        console.log("end")
        this.state = 'RESET'
        return
      }

      var res = this.analysis.data[this.currindex]
      this.step = res.t
      this.highlight = -1
      this.alloc = false
      switch (res.t) {
        case "ObjectAlloc":
          console.log("ObjectAlloc")
          var obj = new Object()
          obj.size = res.size
          obj.name = res.name
          obj.target = res.tag
          obj.hash = res.hash
          obj.mark = false
          this.objs.push(obj)
          this.eden.push(obj)
          this.highlight = res.line - 1
          this.top = 40+18.4*(res.line-1)
          console.log(res.line)
          this.highlightline.top = String(this.top-this.scrollTop) + "px"
          console.log(this.top)
          // this.checkScrollTop()
          this.alloc = true
          this.currentEden += res.size
          this.percentEden = this.getPercent(this.currentEden, this.totalEden)
          console.log(this.eden)
          break

        case "MinorGCStart":
          break

        case "Mark":
          var obj1 = this.eden
          var index = obj1.findIndex(item => item.target == res.tag)
          this.eden[index].mark = true
          console.log(this.eden)
          console.log(this.objs)
          break

        case "MinorCopy":
          if (res.to == 'Survivor0') {
            this.moveTo(this.s0, res.y2s)
            this.nowS = 1
          }
          else {
            this.moveTo(this.s1, res.y2s)
            this.nowS = 0
          }
          this.currentS = res.uss      //jss有bug
          this.percentS = this.getPercent(this.currentS, this.totalS)

          this.moveTo(this.old, res.y2o)
          this.currentOld = res.uos + res.jos
          this.percentOld = this.getPercent(this.currentOld, this.totalOld)

          break

        case "MinorDelete":
          this.eden = []
          if (this.nowS == 1) {
            this.s1 = []
          }
          else {
            this.s0 = []
          }
          this.currentEden = 0
          this.percentEden = this.getPercent(this.currentEden, this.totalEden)

          this.currentS = res.uss + res.jss
          this.percentS = this.getPercent(this.currentS, this.totalS)
          break

        case "MinorGCFinish":
          break

        case "FullGCStart":
          break

        case "FullDelete":
          this.old = []
          this.currentOld = res.uos + res.jos
          this.percentOld = this.getPercent(this.currentOld, this.totalOld)
          break

        case "FullCompact":
          break

        case "FullMove":
          this.moveTo(this.old, res.y2o)
          //清空young
          this.eden = []
          this.s0 = []
          this.s1 = []

          if (res.uss == undefined || res.jss == undefined) {
            // 在 FullGC 之前会进行 MinorGC
            // 所以此时 Eden 和其中一块 S 一定是空的
            // 所以在这里，uys 和 jys 所指代的是另一块 S 的 size
            // this.currentEden = res.uys + res.jys;
            this.currentS = res.uys + res.jys
            this.percentEden = this.getPercent(this.currentEden, this.totalEden)
          } else {
            // 更改后的版本
            // 将 ys 改成了 ss
            this.currentS = res.uss + res.jss
            this.percentS = this.getPercent(this.currentS, this.totalS)
          }

          this.currentOld = res.uos + res.jos
          this.percentOld = this.getPercent(this.currentOld, this.totalOld)
          break

        case "FullGCFinish":
          break

        default: break
      }

      this.currindex++
    },

    Reset () {
      this.currindex = 0
      this.objs = []
      this.old = []
      this.s0 = []
      this.s1 = []
      this.eden = []
      this.step = 'Init'
      this.running = false
      this.state = 'START'
      this.currentEden = 0
      this.currentOld = 0
      this.currentS = 0
      this.percentEden = 0
      this.percentS = 0
      this.percentOld = 0
      this.alloc = false
    },

    autoNext() {
      this.playId = this.autoplay
      if (this.currindex == this.analysis.data.length){
        clearInterval(this.autoplay)
        this.playId = -1
      }
      this.Next()
    },

    startAutoplay() {
      this.autoplay = setInterval(this.autoNext, this.playSpeed)
    },

    pauseAutoplay() {
      clearInterval(this.autoplay)
      this.playId = -1
    },
    changePlaySpeed() {
      console.log(this.autoplay)
      clearInterval(this.autoplay)
      if (this.autoplay==this.playId) {
        this.autoplay = setInterval(this.autoNext, this.playSpeed)
      }
      console.log(this.autoplay)
    }
  }
}
</script>

<style lang="less" scope>
@import "./index.less";
</style>

<style>
.CodeMirror {
  height: 450px !important;
  font-size: 16px;
}
.CodeMirror-vscrollbar{
  width: 0;
}
.el-progress-bar__outer {
  background-color: white !important;
}
.el-progress {
  width: 50%;
  margin-left: 5px;
  margin-right: 10px;
}
.el-upload-list {
  display: inline-block;
}
</style>